<template>
	<header>
		<x-header :left-options="{showBack: false}">
			<div class="head" @click="headshake">
				<span>{{ title }}</span>
				<x-icon type="navicon" @click="menus" class="icon-nav" size="35"></x-icon>
	    	</div>
	    	<transition name="slide-fade">
				<ul class="nav" v-if="menu">
					<li v-for="item in nav"><router-link :to="item.href" :title="item.title">{{ item.title }}</router-link></li>
				</ul>
			</transition>
	    </x-header>
    </header>
</template>

<script>
	import { XHeader } from 'vux'
	export default{
		components : {
			XHeader
		},
		data() {
			return {
     			menu : false,
     			title : '2016上海绿色某某展览会',
     			nav : [
     				{
     					title : '展会首页',
     					href : '/'
     				},
     				{
     					title : '关于我们',
     					href : '/about'
     				},
     				{
     					title : '展商中心',
     					href : '/proList'
     				},
     				{
     					title : '展会资讯',
     					href : '/newsList'
     				},
     				{
     					title : '联系我们',
     					href : '/contact'
     				},
     				{
     					title : '在线登记',
     					href : '/register'
     				},
     			]
     		}
		},
		methods : { 
			menus (){
			  this.menu = !this.menu
		 	},
		 	headshake (ev){	
			
				ev.target.classList.add('active');
				
				setTimeout(function (){	
					ev.target.classList.remove('active');
				},750);
			
			}
		}
	}
	
</script>
<style type="text/css">
	header{
		width: 100%; height: 0.41rem;
	}
	.vux-header{
		 width:100%; z-index: 99; background:#fff !important;
	}
	.vux-header-title{
		margin: 0 auto !important; overflow: visible !important;
	}
	.head{
		position: fixed !important; top: 0; background-color: #7eb732; width:100%; border-radius:0.3rem; height: 0.4rem; line-height: 0.4rem; 
	}
	.head span{
		font-size: 0.18rem;
	}
	.icon-nav{
		position: absolute; right: 0.08rem; fill: #fff; width:0.34rem; height: 0.4rem;
	}
	.nav{
		position: fixed; z-index: 9999; top: 0.45rem; width:60%; right: 0; background: #fff; 
	}
	.nav li{
		list-style: none; 
	}
	.nav a{
		color: #333; display: block; line-height: 0.45rem; height: 0.45rem; border-bottom: 0.01rem solid #ddd; text-align: left; text-indent: 2.5em; font-size: 0.15rem;
	}
	
	.vux-header .active{
		-webkit-animation:headshake 700ms linear; animation:headshake 700ms linear;
	}
	
	@-webkit-keyframes headshake {
	  from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-0.07rem, 0, 0); transform: translate3d(-0.07rem, 0, 0); }
	  20%, 40%, 60%, 80% { -webkit-transform: translate3d(0.07rem, 0, 0); transform: translate3d(0.07rem, 0, 0); }
	}
	
	@keyframes headshake {
	  from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-0.07rem, 0, 0); transform: translate3d(-0.07rem, 0, 0); }
	  20%, 40%, 60%, 80% { -webkit-transform: translate3d(0.07rem, 0, 0); transform: translate3d(0.07rem, 0, 0); }
	}
		
	/* router-link 提供的active 状态  */
	.nav .router-link-exact-active{
		background-color: #7eb732; color: #fff;
	}
	.nav a:hover{
		background-color: #7eb732; color: #fff;
	}
	
	/* 导航动画 */
	.slide-fade-enter-active {
	  transition: all .3s ease;
	  -webkit-transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all .5s;
	  -webkit-transition: all .5s;
	}
	.slide-fade-enter, .slide-fade-leave-active {
	  transform: translateX(2rem); opacity: 0; filter: aplha(opacity:0);
	  -webkit-transform: translateX(2rem); opacity: 0; filter: aplha(opacity:0);
	}
</style>